<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo"></div>
</body>
</html>
<script src="../packages/vue/dist/vue.global.js"></script>
<!-- App组件的模板 -->
<script type="text/x-template" id="app">
  <div @click="add">
    <p>name: {{person.name}}</p>
    <p>age: {{person.age}}</p>
  </div>
</script>

<!-- app渲染的根节点 -->
<div id="demo"></div>

<script>
    const { createApp, reactive } = Vue;
    // 根组件
    const App = {
        template: '#app',
        setup() {
            const person = reactive({
                name: 'zs',
                age: 18
            })
            const add = () => {
                name.value++;
            };
      
            return {
                name,
                add,
            };
        },
    };
    // 创建实例
    const app = createApp(App);
    // 渲染
    app.mount('#demo');
</script>